<template>
  <base-page-view class-name="page-container earnings-page">
    <view class="main">
      <view class="top-box">
        <view class="title-box" :class="{'hide':isInApp}">
          <url-image src="/static/images/member/earnings/left.png" mode="widthFix" width="16" height="31"
            class="back-btn" @click="back()"></url-image>
          <view class="title">我的收益</view>
        </view>
        <view @click="$navigateTo('/pagesEarnings/balance/detail')">
          <view class="miney">{{balance||0|formatMoney}}</view>
          <view class="tip">可用余额(元)</view>
        </view>
        <view class="tx-btn" @click="getWithdrawType">提现</view>
      </view>
      <!-- 零售-董事才显示 -->
      <view class="sy-box">
        <view class="title-box" @click="$navigateTo('/pagesEarnings/retail/detail?queryType='+'ALL')">
          <view class="left">
            <url-image src="/static/images/member/earnings/v1.png" width="24" height="20"></url-image>
            <text class="totoal">零售累计收益 {{retail.amount||0|formatMoney}}</text>
          </view>
          <view class="right">
            <text class="name">查看明细</text>
            <url-image src="/static/images/member/earnings/right.png" width="12" height="22"></url-image>
          </view>
        </view>
        <view class="price-content">
          <view class="price-box" @click="$navigateTo('/pagesEarnings/retail/issued')">
            <view class="num">{{retail.sentAmount||0|formatMoney}}</view>
            <view class="name">
              累计已发放
            </view>
          </view>
          <view class="price-box">
            <view class="num" @click="$navigateTo('/pagesEarnings/retail/detail?queryType='+'UNSEND')">
              {{retail.unsendAmount||0|formatMoney}}
            </view>
            <view class="name">
              <text>累计未发放</text>
              <url-image src="/static/images/member/earnings/question.png" width="26" height="26" class="question"
                @click.stop="question(1)"></url-image>
            </view>
          </view>
          <view class="price-box">
            <view class="num" @click="$navigateTo('/pagesEarnings/retail/detail?queryType='+'MONTH')">
              {{retail.estimatedAmount||0|formatMoney}}
            </view>
            <view class="name">
              本月预估收益
              <url-image src="/static/images/member/earnings/question.png" width="26" height="26" class="question"
                @click.stop="question(2)"></url-image>
            </view>
          </view>
        </view>
      </view>
      <view class="sy-box">
        <view class="title-box" @click="$navigateTo('/pagesEarnings/bhs/settleDetails?queryEnum='+'ALL')">
          <view class="left">
            <url-image src="/static/images/member/earnings/v2.png" width="24" height="20"></url-image>
            <text class="totoal">碧划算累计收益 {{bhs.amount||0|formatMoney}}</text>
          </view>
          <view class="right">
            <text class="name">查看明细</text>
            <url-image src="/static/images/member/earnings/right.png" width="12" height="22"></url-image>
          </view>
        </view>
        <view class="price-content">
          <view class="price-box" @click="$navigateTo('/pagesEarnings/bhs/issued')">
            <view class="num">{{bhs.sentAmount||0|formatMoney}}</view>
            <view class="name">
              累计已发放
            </view>
          </view>
          <view class="price-box">
            <view class="num" @click="$navigateTo('/pagesEarnings/bhs/settleDetails?queryEnum='+'UNSETTLE')">
              {{bhs.unsendAmount||0|formatMoney}}
            </view>
            <view class="name">
              <text>累计未发放</text>
              <url-image src="/static/images/member/earnings/question.png" width="26" height="26" class="question"
                @click.stop="question(3)"></url-image>
            </view>
          </view>
          <view class="price-box">
            <view class="num" @click="$navigateTo('/pagesEarnings/bhs/settleDetails?queryEnum='+'MONTH')">
              {{bhs.estimatedAmount||0|formatMoney}}
            </view>
            <view class="name">
              本月预估收益
              <url-image src="/static/images/member/earnings/question.png" width="26" height="26" class="question"
                @click.stop="question(4)"></url-image>
            </view>
          </view>
        </view>
      </view>
      <!-- 箱起收益-箱起新晋董事显示(即除了箱起普通会员) -->
      <view class="sy-box" v-show="box_info.box_level>0">
        <view class="title-box" @click="$navigateTo('/pagesEarnings/box/income')">
          <view class="left">
            <url-image src="/static/images/member/earnings/v3.png" width="24" height="20"></url-image>
            <text class="totoal">箱起累计收益积分 {{box.all_integral||0|formatMoney}}</text>
          </view>
          <view class="right">
            <text class="name">查看明细</text>
            <url-image src="/static/images/member/earnings/right.png" width="12" height="22"></url-image>
          </view>
        </view>
        <view class="price-content">
          <view class="price-box" @click="$navigateTo('/pagesEarnings/box/integralDetail')">
            <view class="num">{{box.use_integral||0|formatMoney}}</view>
            <view class="name">
              可用积分
            </view>
          </view>
          <view class="price-box" @click="$navigateTo('/pagesEarnings/box/writeOff')">
            <view class="num">{{box.total_write_off||0|formatMoney}}</view>
            <view class="name">
              <text>累计核销积分</text>
            </view>
          </view>
          <view class="price-box" @click="$navigateTo('/pagesEarnings/box/monthIncome')">
            <view class="num">{{box.month_integral||0|formatMoney}}</view>
            <view class="name">
              本月收益积分
            </view>
          </view>
        </view>
      </view>
    </view>
  </base-page-view>
</template>

<script>
  import {
    toBackPage
  } from '@/utils/navigateTo'
  import {
    inApp
  } from '@/utils/tools'
  export default {
    data() {
      return {
        balance: 0, //余额
        //零售
        retail: {},
        //碧划算
        bhs: {},
        //箱起
        box: {},
        //箱起用户信息
        box_info: {},
        withdrawInfo: {}, //提现用户信息
      }
    },
    onShow() {
      // this.app_interactive_data();
    },
    onLoad() {
      // this.$setNavTitle('我的收益', true);
    },
    onPullDownRefresh() {
      this.app_interactive_data();
    },
    methods: {
      async app_interactive_data() {
        //余额
        this.$api.gainApi.available_amount({
          userId: this.userInfo.uid
        }).then(res => {
          this.balance = res.data;
        });
        //零售累计
        this.$api.gainApi.retail_cumulative({
          userId: this.userInfo.uid
        }).then(res => {
          this.retail = res.data;
        });
        //碧划算累计
        this.$api.gainApi.bhs_cumulative({
          userId: this.userInfo.uid
        }).then(res => {
          this.bhs = res.data;
        });
        //箱起累计收益
        this.$api.gainApi.box_cumulative({
          userId: this.userInfo.uid
        }).then(res => {
          this.box = res.data;
        });
        //箱起用户信息
        this.$api.boxApi.userInfo().then(res => {
          this.box_info = res.data;
        });
        setTimeout(function() {
          uni.stopPullDownRefresh()
        }, 500)
      },
      back() {
        toBackPage();
      },
      //去提现
      async getWithdrawType() {
        const bihsData = await this.$api.commissionApi.getWithdrawInfo({
          userId: this.$store.state.userInfo.uid
        })
        //获取提现用户信息
        const withdrawData = await this.$api.commissionApi.getWithdrawData({
          user_id: this.$store.state.userInfo.uid
        })
        if (bihsData.code === '000000') {
          const type = bihsData.data.withdrawRule.withdrawChannel
          console.log("bihsData", bihsData)
          console.log("withdrawData", withdrawData)
          if (withdrawData.code == 0) {
            this.withdrawInfo = withdrawData.data || {}
            uni.setStorageSync("withdrawInfo", withdrawData.data)
            if (this.withdrawInfo.status == 3) {
              this.$navigateTo('/pagesCommission/bihs/withdraw?type=' + type)
            } else {
              let status = 0
              if(this.withdrawInfo.status){
                status = this.withdrawInfo.status
              }
              let url = ''
              if(status == 2){
                url = '/pagesMine/certification/index?updateRealname=true'
              }else{
                url = `/pagesMine/certification/index?examine=${status === 4}`
              }
              this.$gc.$message({
                content: '您暂未进行实名认证，需进行实名认证且通过后才可以使用',
                title: '温馨提示',
                type: 'richText',
                showMessage: true,
                showCancel: true,
                confirmText: '立即实名',
                align: 'center',
                confirm: () => {
                  uni.removeStorageSync('realName')
                  this.$navigateTo(url)
                }
              })
            }
          }
        }
      },
      question(type) {
        let message = ''
        let title = ''
        if (type === 1) {
          message = '零售收益发放时间说明：每月15日发放上月确认收货订单对应收益金额到可用余额，可提现。因可能产生售后，该收益以最终到账为准。'
          title = '说明'
        } else if (type === 2) {
          message = '本月预估收益：本月下单预估产生的收益。因可能产生售后，该收益以最终到账为准。'
          title = '说明'
        } else if (type === 3) {
          message = '碧划算收益发放时间说明：每月25日发放上月已结算订单对应收益金额到可用余额，可提现。因可能产生售后，该收益以最终到账为准。'
          title = '说明'
        } else if (type === 4) {
          message = '本月预估收益：本月下单预估产生的收益。因可能产生售后，该收益以最终到账为准。'
          title = '说明'
        }
        this.message =
          this.$gc.$message({
            content: message,
            type: 'richText',
            title: title,
            showMessage: true,
            showCancel: false,
            confirmText: '确认',
            align: 'left'
          })
      }
    }
  }
</script>

<style lang="scss" scoped>
  .main {
    padding-bottom: 1rpx;
  }

  .top-box {
    background: url('https://asset-uat.bisinuolan.cn/bixuan_uni/static/images/member/earnings/top-back.png') no-repeat;
    width: 100%;
    height: 494rpx;
    background-size: 100% auto;
    text-align: center;
    font-family: PingFang SC;

    .title-box {
      /* #ifdef H5 */
      padding-top: 34rpx;
      /* #endif*/
      /* #ifndef H5 */
      padding-top: 85rpx;
      /* #endif*/
      position: relative;
      text-align: center;
      color: white;
      font-size: 34rpx;

      .back-btn {
        position: absolute;
        left: 20rpx;
        margin-top: 10rpx;
      }
    }

    .hide {
      visibility: hidden;
      padding-top: 0rpx;
    }

    .miney {
      /* #ifdef H5 */
      margin-top: 46rpx;
      /* #endif*/
      /* #ifndef H5 */
      margin-top: 26rpx;
      /* #endif*/
      font-size: 82rpx;
      font-weight: 400;
      color: #FFFFFF;
    }

    .tip {
      color: #FFFFFF;
      opacity: 0.69;
      font-size: 24rpx;
      margin-top: 33rpx;
    }

    .tx-btn {
      width: 302rpx;
      height: 80rpx;
      line-height: 70rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      opacity: 0.9;
      border: 2rpx solid #bebebe;
      border-radius: 10rpx;
      margin: 42rpx auto 0rpx;
      font-size: 30rpx;
      color: white;
    }
  }

  .sy-box {
    background-color: white;
    border-radius: 5rpx;
    margin: 19rpx 10rpx;

    .title-box {
      display: flex;
      justify-content: space-between;
      padding: 46rpx 32rpx 0rpx;

      .left {
        .totoal {
          margin-left: 10rpx;
        }
      }

      .right {
        color: #666666;

        .name {
          margin-right: 24rpx;
        }
      }
    }

    .price-content {
      display: flex;
      padding: 100rpx 0rpx 56rpx;

      .price-box {
        flex: 1;
        text-align: center;

        .num {
          font-size: 32rpx;
          margin-bottom: 12rpx;
        }

        .name {
          font-size: 24rpx;
          color: #666666;
          display: flex;
          align-items: center;
          justify-content: center;
        }

        .question {
          margin-left: 10rpx;
          // padding: 10rpx;
        }
      }
    }
  }
</style>
